<!DOCTYPE html>
<html>

<head>
    <title> Lists and Keys </title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    // Transform lists in JavaScript
    const numbers = [1, 2, 3, 4, 5];
    const doubled = numbers.map((num) => num * 2);
    console.log(doubled);

    // Rendering Multiple Components
    const listItems = numbers.map((num) => <li>{num}</li>);
    ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));
</script>